import styled from 'styled-components'
import btnBgNormal from '@img/btn-bg-normal.png'
import img from '@img/all.png'

export const StyledWrap = styled.div`
	.content {
		height: 180px;
		overflow: auto;
		margin: 10px 10px;
		.item {
			position: relative;
			height: 21px;
			line-height: 21px;
			padding: 0 20px;
			width: 100%;
			margin-bottom: 9px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			.select-icon {
				position: absolute;
				display: none;
				top: 5px;
				left: 6px;
			}
			&:hover {
				background: url(${btnBgNormal}) repeat-y scroll 0 0 #69bef0;
				background-size: 100%;
				color: #fff;
				.select-icon {
					background-position: -11px -652px;
				}
			}

			&.selected {
				.select-icon {
					display: inline-block;
				}
			}
		}
		.empty {
			color: #b6b6b6;
			text-align: center;
			margin-top: 78px;
		}
	}
`

export const CheckedIcon = styled.span`
	display: inline-block;
	background-image: url(${img});
	width: 10px;
	height: 10px;
	background-position: -1px -652px;
`
